<template>
  <div class="learning-resources">
    <!-- 筛选条件 -->
    <el-card class="filter-card">
      <template #header>
        <div class="card-header">
          <span>学习资源筛选</span>
        </div>
      </template>
      <el-form :model="filterForm" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="技能名称" prop="skillName">
          <el-input v-model="filterForm.skillName" placeholder="请输入技能名称" />
        </el-form-item>
        <el-form-item label="难度级别" prop="difficulty">
          <el-select v-model="filterForm.difficulty" placeholder="请选择难度级别">
            <el-option label="初级" value="初级" />
            <el-option label="中级" value="中级" />
            <el-option label="高级" value="高级" />
          </el-select>
        </el-form-item>
        <el-form-item label="资源类型" prop="resourceType">
          <el-select v-model="filterForm.resourceType" placeholder="请选择资源类型">
            <el-option label="视频" value="视频" />
            <el-option label="文档" value="文档" />
            <el-option label="课程" value="课程" />
            <el-option label="书籍" value="书籍" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button 
            type="primary" 
            @click="handleSearch" 
            :loading="loading"
            :disabled="loading"
            class="advice-btn"
          >
            <el-icon v-if="!loading" style="margin-right:4px;"><Lightning /></el-icon>
            {{ loading ? '搜索中...' : '搜索资源' }}
          </el-button>
          <span v-if="loading" class="advice-tip">资源推荐生成可能需要几秒钟，请耐心等待...</span>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 资源列表 -->
    <el-card v-if="resources.length > 0" class="resources-card">
      <template #header>
        <div class="card-header">
          <span>推荐资源</span>
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="total"
            :page-sizes="[5, 10, 20, 30]"
            layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </template>
      
      <el-timeline>
        <el-timeline-item
          v-for="resource in resources"
          :key="resource.title"
          :type="getResourceTypeIcon(resource.type)"
          :hollow="true"
          :timestamp="resource.platform"
        >
          <el-card class="resource-item">
            <template #header>
              <div class="resource-header">
                <h3 class="resource-title" v-html="formatTitle(resource.title)"></h3>
                <el-tag :type="getDifficultyType(resource.difficulty)" size="small">
                  {{ resource.difficulty }}
                </el-tag>
              </div>
            </template>
            <p class="resource-description">{{ resource.description }}</p>
            <div class="resource-footer">
              <el-tag size="small" type="info">{{ resource.type }}</el-tag>
              <el-button 
                type="primary" 
                link 
                @click="openResource(resource.link)"
              >
                查看资源
              </el-button>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>

    <!-- 无数据提示 -->
    <el-empty 
      v-else-if="!loading" 
      description="暂无推荐资源" 
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { Lightning } from '@element-plus/icons-vue'

// 表单数据
const filterForm = ref({
  skillName: '',
  difficulty: '',
  resourceType: ''
})

// 表单验证规则
const rules = {
  skillName: [
    { required: true, message: '请输入技能名称', trigger: 'blur' }
  ],
  difficulty: [
    { required: true, message: '请选择难度级别', trigger: 'change' }
  ],
  resourceType: [
    { required: true, message: '请选择资源类型', trigger: 'change' }
  ]
}

// 资源数据
const resources = ref([])
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)
const loading = ref(false)

// 获取资源列表
const handleSearch = async () => {
  if (!filterForm.value.skillName) {
    ElMessage.warning('请填写技能名称')
    return
  }

  loading.value = true
  try {
    const params = {
      skillName: filterForm.value.skillName,
      difficulty: filterForm.value.difficulty,
      resourceType: filterForm.value.resourceType,
      page: currentPage.value,
      size: pageSize.value
    }

    const response = await axios.post('http://localhost:8081/api/recommendations/learning-resources', params)
    if (response.data.code === 200) {
      resources.value = response.data.data.resources
      total.value = response.data.data.total
    }
  } catch (error) {
    console.error('获取学习资源失败:', error)
    ElMessage.error('获取学习资源失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val
  handleSearch()
}

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  handleSearch()
}

// 获取资源类型图标
const getResourceTypeIcon = (type) => {
  switch (type) {
    case '视频':
      return 'primary'
    case '文档':
      return 'success'
    case '课程':
      return 'warning'
    case '书籍':
      return 'info'
    default:
      return 'primary'
  }
}

// 获取难度级别标签类型
const getDifficultyType = (difficulty) => {
  switch (difficulty) {
    case '初级':
      return 'success'
    case '中级':
      return 'warning'
    case '高级':
      return 'danger'
    default:
      return 'info'
  }
}

// 格式化标题（移除星号）
const formatTitle = (title) => {
  return title.replace(/\*/g, '')
}

// 打开资源链接
const openResource = (link) => {
  // 从markdown链接中提取URL
  const url = link.match(/\[(.*?)\]\((.*?)\)/)?.[2]
  if (url) {
    window.open(url, '_blank')
  }
}
</script>

<style scoped>
.learning-resources {
  padding: 20px;
}

.filter-card,
.resources-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.resource-item {
  margin-bottom: 10px;
}

.resource-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.resource-title {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.resource-description {
  margin: 10px 0;
  color: #606266;
  line-height: 1.6;
}

.resource-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

:deep(.el-select) {
  width: 180px;
}

:deep(.el-timeline-item__content) {
  width: 100%;
}

:deep(.el-timeline-item__timestamp) {
  color: #909399;
  font-size: 13px;
}

.advice-btn {
  border-radius: 24px;
  font-weight: 600;
  background: linear-gradient(90deg, #409EFF 0%, #36D1DC 100%);
  box-shadow: 0 2px 8px rgba(64,158,255,0.08);
  transition: all 0.2s;
  padding: 0 24px;
}
.advice-btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 16px rgba(64,158,255,0.15);
}
.advice-tip {
  margin-left: 16px;
  color: #909399;
  font-size: 14px;
  vertical-align: middle;
}
</style> 